<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<style>
#cameraplayer_left_up {
	position: absolute;
	
	height:150px;
	width:150px;
	margin-left:50px;
	margin-top:50px;
	z-index: 10040;
}
#cameraplayer_up {
	position: absolute;
	
	height:150px;
	width:150px;
	margin-left:180px;
	margin-top:50px;
	z-index: 10050;
}
#cameraplayer_right_up {
	position: absolute;
	
	height:150px;
	width:150px;
	margin-left:320px;
	margin-top:50px;
	z-index: 10040;
}
#cameraplayer_right {
	position: absolute;
	
	height:150px;
	width:150px;
	margin-left:320px;
	margin-top:180px;
	z-index: 10050;
}#cameraplayer_right_down {
	position: absolute;
	
	height:150px;
	width:150px;
	margin-left:320px;
	margin-top:320px;
	z-index: 10040;
}
#cameraplayer_down {
	position: absolute;
	
	height:150px;
	width:150px;
	margin-left:180px;
	margin-top:320px;
	z-index: 10050;
}
#cameraplayer_left_down {
	position: absolute;
	
	height:150px;
	width:150px;
	margin-left:50px;
	margin-top:320px;
	z-index: 10040;
}
#cameraplayer_left {
	position: absolute;
	
	height:150px;
	width:150px;
	margin-left:50px;
	margin-top:180px;
	z-index: 10050;
}
#cameraplayer_zoom {
	position: absolute;
	
	height:300px;
	width:100px;
	margin-left:480px;
	margin-top:100px;
	z-index: 10040;
}
#cameraplayer_focus {
	position: absolute;
	
	height:300px;
	width:100px;
	margin-left:590px;
	margin-top:100px;
	z-index: 10040;
}
#cameraplayer_iris {
	position: absolute;
	
	height:300px;
	width:100px;
	margin-left:700px;
	margin-top:100px;
	z-index: 10040;
}
#cameraplayer_zoom_out {
	position: absolute;
	
	height:150px;
	width:100px;
	margin-left:480px;
	margin-top:100px;
	z-index: 10050;
}
#cameraplayer_zoom_in {
	position: absolute;
	
	height:150px;
	width:100px;
	margin-left:480px;
	margin-top:250px;
	z-index: 10050;
}
#cameraplayer_focus_in {
	position: absolute;
	
	height:150px;
	width:100px;
	margin-left:590px;
	margin-top:100px;
	z-index: 10050;
}
#cameraplayer_focus_out {
	position: absolute;
	
	height:150px;
	width:100px;
	margin-left:590px;
	margin-top:250px;
	z-index: 10050;
}
#cameraplayer_iris_close {
	position: absolute;
	
	height:150px;
	width:100px;
	margin-left:700px;
	margin-top:100px;
	z-index: 10050;
}
#cameraplayer_iris_open {
	position: absolute;
	
	height:150px;
	width:100px;
	margin-left:700px;
	margin-top:250px;
	z-index: 10050;
}

</style>
<div class="apple_overlay" id="cameraController">
	<div id="cameraplayer">
		<img id="cameraplayer_up" src="resources/img/camera/up.png" />
		<img id="cameraplayer_left" src="resources/img/camera/left.png" />
		<img id="cameraplayer_right" src="resources/img/camera/right.png" />
		<img id="cameraplayer_down" src="resources/img/camera/down.png" />		
		<img id="cameraplayer_left_up" src="resources/img/camera/left_up.png" />
		<img id="cameraplayer_right_up" src="resources/img/camera/right_up.png" />
		<img id="cameraplayer_left_down" src="resources/img/camera/left_down.png" />
		<img id="cameraplayer_right_down" src="resources/img/camera/right_down.png" />
		<img id="cameraplayer_zoom" src="resources/img/camera/zoom.png" />
		<img id="cameraplayer_focus" src="resources/img/camera/focus.png" />
		<img id="cameraplayer_iris" src="resources/img/camera/iris.png" />
		<a id="cameraplayer_zoom_out"></a>
		<a id="cameraplayer_zoom_in"></a>
		<a id="cameraplayer_focus_in"></a>
		<a id="cameraplayer_focus_out"></a>
		<a id="cameraplayer_iris_close"></a>
		<a id="cameraplayer_iris_open"></a>
	</div>
</div>

<script type="text/javascript">
function initCameraOverlay(cname, cmd){
	$("#"+cname).click(function(){
		command($("#currentNav").attr("value"), true, cmd, "");
	});
}
$(function(){
	initCameraOverlay("cameraplayer_up", "camera_move_top");
	initCameraOverlay("cameraplayer_left", "camera_move_left");
	initCameraOverlay("cameraplayer_right", "camera_move_right");
	initCameraOverlay("cameraplayer_down", "camera_move_down");
	initCameraOverlay("cameraplayer_left_up", "camera_move_left_top");
	initCameraOverlay("cameraplayer_right_up", "camera_move_right_top");
	initCameraOverlay("cameraplayer_left_down", "camera_move_left_down");
	initCameraOverlay("cameraplayer_right_down", "camera_move_right_down");

	$("#cameraplayer_zoom_out").click(function(){
		command($("#currentNav").attr("value"), true, "camera_zoom_out", "");
	});
	$("#cameraplayer_zoom_in").click(function(){
		command($("#currentNav").attr("value"), true, "camera_zoom_in", "");
	});
	$("#cameraplayer_focus_in").click(function(){
		command($("#currentNav").attr("value"), true, "camera_focus_in", "");
	});
	$("#cameraplayer_focus_out").click(function(){
		command($("#currentNav").attr("value"), true, "camera_focus_out", "");
	});
	$("#cameraplayer_iris_close").click(function(){
		command($("#currentNav").attr("value"), true, "camera_iris_close", "");
	});
	$("#cameraplayer_iris_open").click(function(){
		command($("#currentNav").attr("value"), true, "camera_iris_open", "");
	});
});
</script>